<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>echarts</title>
	<script type="text/javascript" src="js/echarts.common.min.js"></script>
</head>
<body>
	<div id="main" style="width: 100%; height: 800px"></div>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));
		//指定图标的配置项
		option = {
			title: {
				textStyle: {
					fontSize: 18,
				}
			},
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
		    },
		    series: [
		        {
		            name:'中心',
		            type:'pie',
		            selectedMode: 'single',
		            radius: [0, '20%'],

		            label: {
		                normal: {
		                    position: 'center'
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:1, name:'直达'}
		                
		            ]
		        },
		        {
		            name:'第一层',
		            type:'pie',
		            radius: ['30%', '45%'],
		            label: {
		            	normal: {
		            		position: 'inner'
		            	}
		            },
		            labelLine: {
		            	normal: {
		            		show: false
		            	}
		            },
		            data:[
		                {value:100, name:'直达'},
		                {value:100, name:'邮件营销'},
		                {value:100, name:'联盟广告'},
		                {value:100, name:'视频广告'},
		                {value:100, name:'百度'},
		                {value:100, name:'谷歌'},
		                {value:100, name:'必应'},
		                {value:100, name:'其他'}
		            ]
		        },
		        {
		            name:'第二层',
		            type:'pie',
		            radius: ['55%', '70%'],
		            label: {
		            	normal: {
		            		position: 'inner'
		            	}
		            },
		            labelLine: {
		            	normal: {
		            		show: false
		            	}
		            },

		            data:[
		                {value:100, name:'直达'},
		                {value:100, name:'邮件营销'},
		                {value:100, name:'联盟广告'},
		                {value:100, name:'视频广告'},
		                {value:100, name:'百度'},
		                {value:100, name:'谷歌'},
		                {value:100, name:'必应'},
		                {value:100, name:'其他'}
		            ]
		        },
		        {
		            name:'第三层',
		            type:'pie',
		            radius: ['80%', '100%'],
		            label: {
		            	normal: {
		            		position: 'inner'
		            	}
		            },
		            labelLine: {
		            	normal: {
		            		show: false
		            	}
		            },

		            data:[
		                {value:100, name:'直达'},
		                {value:100, name:'邮件营销'},
		                {value:100, name:'联盟广告'},
		                {value:100, name:'视频广告'},
		                {value:100, name:'百度'},
		                {value:100, name:'谷歌'},
		                {value:100, name:'必应'},
		                {value:100, name:'其他'}
		            ]
		        }
		    ]
		};

		myChart.setOption(option);
	</script>
	
</body>
</html>